<template>
    <div
        id="query-record-item-container"
        :style="getBackground(index)"
        @click="getPath(record)">
        <div class="query-record-item">{{getIndex(index)}}</div>
        <div class="query-record-item">{{record.dept}}</div>
        <div class="query-record-item">{{record.group}}</div>
        <div class="query-record-item">{{record.name}}</div>
        <div class="query-record-item">{{record.date}}</div>
        <div class="query-record-item">{{record.time}}</div>
    </div>
</template>

<script>

import local_vuex from "@sign/js/vuex";

export default {
    data() {
        return {
            // 奇数行的样式
            itemColor: {
                background: "rgb(250, 250, 250)"
            }
        }
    },
    props: {
        record: {
            type: Object,
            default: () => {
                return {
                    dept: "部门",
                    group: "组别/职位",
                    name: "姓名",
                    date: "日期",
                    time: "时间段"
                }
            }
        },
        index: {
            type: Number
        }
    },
    methods: {
        /**
         * 获取样式，如果下标 v 是奇数，返回奇数行样式
         */
        getBackground(v) {
            if (v && (v % 2 == 1)) {
                return this.itemColor;
            }
        },
        /**
         * 获取下标，当 index 超出结果列表时，下标为空
         */
        getIndex(index) {
            return index <= local_vuex.state.resultList.length ? index : "";
        },
        getPath(v) {
            if (v != undefined && v.sid != undefined) {
                this.$store.state.view.profile.user = this.$jspt.getStudent(v.sid, v.dept, v.group);
                this.$router.replace("/profile");
            }
        }
    }
}
</script>

<style lang="scss">
@import "@sign/scss/query-item.scss";
</style>